<!-- subpkg_consult/order_detail/index.vue -->
<script setup></script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="consult-page">
      <view class="page-header">
        <!-- 订单状态 -->
        <view class="order-status">
          <view class="label">
            <text class="title"> 图文问诊 39 元 </text>
            <text class="tips">
              取消 / 退款进度：您的订单已取消，诊金将在 1-7 个工作日内退回原支付账户。
            </text>
          </view>
          <text class="status"> 待支付 </text>
        </view>
        <!--  医生信息 -->
        <view class="consult-doctor">
          <text class="lable"> 服务医生信息 </text>
          <view class="doctor">
            <image
              class="doctor-avatar"
              src="/static/uploads/doctor-avatar.jpg"
            />
            <view class="doctor-info">
              <view class="meta">
                <text class="name"> 王医生 </text>
                <text class="title"> 内分泌科 | 主任医师 </text>
              </view>
              <view class="meta">
                <text class="tag"> 三甲 </text>
                <text class="hospital"> 积水潭医院 </text>
              </view>
            </view>
            <view class="arrow">
              <uni-icons size="18" color="#C3C3C5" type="forward" />
            </view>
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="consult-patient">
        <view class="list-title"> 患者资料 </view>
        <uni-list :border="false">
          <uni-list-item title=" 患者信息 " right-text=" 李富贵 | 男 | 30 岁 " />
          <uni-list-item title=" 病情描述 " note=" 头痛，头晕，恶心 " />
        </uni-list>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="list-title"> 订单信息 </view>
        <uni-list :border="false">
          <uni-list-item title=" 订单编号 " right-text="202201127465" />
          <uni-list-item title=" 创建时间 " right-text="2022-01-23 09:23:46" />
          <uni-list-item title=" 取消时间 " right-text="2022-01-23 09:23:46" />
          <uni-list-item title=" 应付款 " right-text="¥49" />
          <uni-list-item title=" 优惠券 ">
            <template #footer>
              <view class="uni-list-text-red">-¥10.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title=" 积分抵扣 ">
            <template #footer>
              <view class="uni-list-text-red">-¥1.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title=" 实付款 ">
            <template #footer>
              <view class="uni-list-text-red">¥39.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title=" 支付时间 " right-text="2022-01-23 09:23:46" />
          <uni-list-item title=" 支付方式 " right-text=" 微信支付 " />
        </uni-list>
      </view>

      <view class="notice-bar">
        <uni-notice-bar text=" 请在 00:14:59 内完成支付，超时订单将取消 " />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount">
            需付款: <text class="number">¥39.00</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor"> 取消问诊 </button>
            <button class="uni-button"> 立即支付 </button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text> 删除订单 </text>
            </view>
            <button class="uni-button"> 再次购买 </button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
 // subpkg_consult/order_detail/index.scss
 .consult-page {
   padding-bottom: calc(env(safe-area-inset-bottom) + 155rpx);
 
   .list-title {
     margin: 30rpx 0 10rpx;
     font-weight: 500;
     color: #121826;
   }
 
   :deep(.uni-list-item__container) {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 
   :deep(.uni-list-item__content-title) {
     font-size: 32rpx !important;
     color: #3c3e42 !important;
   }
 
   :deep(.uni-list-item__extra-text) {
     font-size: 32rpx !important;
     color: #848484 !important;
   }
 
   :deep(.uni-list-item__content-note) {
     font-size: 30rpx !important;
     color: #848484 !important;
   }
 
   :deep(.uni-icon-wrapper) {
     padding: 0 !important;
     margin-right: -10rpx !important;
     font-size: 36rpx !important;
     margin-top: 2rpx;
   }
 }
 
 .page-header {
   padding: 20rpx 30rpx 0;
   // 需要一个高为 300 的背景图
   background-color: #eaf8f6;
 
   .order-status {
     line-height: 1;
     padding: 30rpx 0 0 6rpx;
     font-size: 32rpx;
     position: relative;
 
     .title {
       display: block;
       margin-bottom: 20rpx;
       color: #121826;
       font-weight: 500;
     }
 
     .tips {
       line-height: 1.5;
       font-size: 24rpx;
       color: #6f6f6f;
     }
 
     .status {
       position: absolute;
       top: 30rpx;
       right: 0;
       color: #16c2a3;
     }
 
     .color-1 {
     }
     .color-2 {
     }
     .color-2 {
     }
   }
 
   .consult-doctor {
     position: relative;
     bottom: -40rpx;
 
     .title {
       font-size: 28rpx;
       color: #3c3e42;
     }
 
     .doctor {
       display: flex;
       align-items: center;
       height: 160rpx;
       padding: 20rpx 30rpx;
       margin-top: 20rpx;
       border-radius: 20rpx;
       background-color: #fff;
       box-shadow: 0px 0px 22px 0px rgba(210, 210, 210, 0.5);
       position: relative;
 
       .doctor-avatar {
         width: 100rpx;
         height: 100rpx;
         border-radius: 50%;
       }
 
       .doctor-info {
         height: 100rpx;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin-left: 12rpx;
         flex: 1;
       }
 
       .meta {
         display: flex;
         align-items: center;
       }
 
       .name {
         font-size: 36rpx;
         color: #3c3e42;
         margin-right: 10rpx;
       }
 
       .title {
         font-size: 24rpx;
         color: #6f6f6f;
       }
 
       .tag {
         line-height: 1;
         padding: 8rpx 16rpx 6rpx;
         font-size: 22rpx;
         color: #fff;
         border-radius: 6rpx;
         background-color: #677fff;
       }
 
       .hospital {
         font-size: 26rpx;
         color: #3c3e42;
         margin-left: 10rpx;
       }
     }
 
     .arrow {
       position: absolute;
       top: 50%;
       right: 16rpx;
       transform: translateY(-50%);
     }
   }
 }
 
 .consult-patient {
   padding: 50rpx 30rpx 0;
   background-color: #fff;
 }
 
 .order-info {
   padding: 0 30rpx;
   margin-top: 30rpx;
   background-color: #fff;
   overflow: hidden;
 
   .uni-list-text-red {
     color: #eb5757;
   }
 }
 
 .notice-bar {
   text-align: center;
   margin-top: 30rpx;
   position: sticky;
   bottom: calc(env(safe-area-inset-bottom) + 145rpx);
 }
 
 .toolbar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
 
   display: flex;
   align-items: center;
   height: 88rpx;
   padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
   background-color: #fff;
 
   .buttons {
     flex: 1;
     display: flex;
   }
 
   .delete-botton {
     display: flex;
     flex-direction: column;
     color: #848484;
     text-align: center;
     font-size: 24rpx;
     margin: 0 60rpx 0 30rpx;
   }
 
   .uni-button {
     flex: 1;
     padding: 0 30rpx;
 
     &.minor {
       color: #16c2a3;
       margin-right: 20rpx;
       border: 1rpx solid #ededed;
       background-color: #fafafa;
     }
   }
 
   .total-amount {
     display: flex;
     align-items: center;
     width: 270rpx;
     font-size: 28rpx;
     color: #3c3e42;
   }
 
   .number {
     font-size: 40rpx;
     color: #eb5757;
     margin-left: 10rpx;
   }
 }
</style>